<template >
	<view style="font-size: 14px; background-color: #FFFFFF;">

		
		<view class="" style="width: 90%;margin-left: 5%;">
			<uni-search-bar placeholder="搜索" @input="search"  ></uni-search-bar>
		</view>
		<!-- <view class="zhuli" v-for="(item,index) in list" :key="index" @click="check(index,item.checked)">
			<view class="">
				<label class="radio" style="display: inline-block;">
					
					<view class="example-box" style=" width:330px; background-color: #FAFAFA; margin-bottom: 10px;">
						<radio style="" value="" :checked="item.checked"/>
						<uni-card style="border: 0;margin-left: 10px; " :title="item.name" mode="title" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"
						 :extra="item.lastname">
						</uni-card>
					</view>
					
				</label>
			</view> 
		</view> -->
		
		<u-index-list :scrollTop="scrollTop">
		<!-- 	<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" v-show="false" /> -->
				
				<view class="list-cell"> 
					<view class="" > 
						<view v-for="(city,idx) in list1" :key="idx"  style="display: flex;justify-content: flex-start;flex-direction: row;align-items: center;padding: 10px; " >
							<image :src="city.avatar" mode="widthFix" style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;"></image>
							<view style=" width: 100%; display: flex; align-items:center; height:40px;">
								 {{city.account}}
							</view>
								<text style="color: #DFDFDF;display: flex;flex-direction: row;width: 60px;" @click="dele(city)">移除</text>
						</view>
					</view>
				</view>
			<!-- </view> -->
		</u-index-list>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				roomid:'',
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				],
										
				list1: [],
		
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			console.log("黑名单",options)
			this.roomid = options.roomid
			this.hei();
		},
		methods:{
			hei(){
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/qhmlist',
					method: "POST",
					data: {
						qid: this.roomid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: (res) => {
						console.log(res);
						this.list1 = res.data.data
						console.log("黑名单成员")
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			search(e){
				console.log(e)
			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			finish(){
				uni.navigateBack({
					delta:1
				})
			},
			check(index,checked){
				if(checked == true){
					this.list[index].checked=false
				}else if (checked == false){
					this.list[index].checked=true
				}
			},
			dele(data){
				console.log(data)
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/qhmyc',
					method: "POST",
					data: {
						qid: this.roomid,
						account:data.account
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: (res) => {
						console.log(res);
						if(res.data.status==200){
							uni.showToast({
								title:res.data.msg
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
								this.hei();
							},500)
						}
						
					},
					fail: (err) => {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style scoped>
	.zhuli {
		margin: 0 20px;
		display: flex;

	}
	.example-box{
		display: flex;
		justify-content: flex-end;
	}
	uni-radio{
		line-height: 68px;
	}
</style>
